<template>
	<view class="w-flex-col page space-y-40">
		<view class="w-flex-col group_2">
			<view class="w-flex-col w-justify-start w-items-end w-self-start w-relative group">
				<image class="w-shrink-0 image" src="/static/my/e3fc8a20b3a547ea7f50bf1c0e63d42f.png" />
				<view class="w-shrink-0 section pos">
					<text class="text pos_4">{{user.nick_name ? user.nick_name : '自动WiFi'}}</text>
				</view>
				<button class="btn" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">

					<image class="w-shrink-0 image_2 pos_2" src="/static/my/56edcf376bd1281b9727f9dfb9e4067f.png"
						v-show="!user.head_img" />
					<image class="w-shrink-0 image_2 pos_2" :src="user.head_img" v-show="user.head_img" />
				</button>
				<view class="w-flex-row equal-division space-x-10 pos_5" v-if="token">
					<view class="w-flex-row w-justify-evenly equal-division-item tcen">
						<image class="image_4" src="/static/my/10e734a126c842904e5c07d8a9c95f2d.png" />
						<text class="font_1 text_2">高级认证</text>
					</view>
					<view class="w-flex-row w-justify-evenly equal-division-item">
						<image class="image_4 img" src="/static/my/cb6b0934fb31846e0a8696cf3df10674.png" />
						<input class="font_1 text_2 tex" v-model="nickname" type="nickname" @blur="bindblur"
							placeholder-style="color:#fff" placeholder="编辑资料" @input="bindinput">
					</view>
				</view>
				<view class="w-flex-row equal-division space-x-10 pos_5" v-else>
					<button class="login-btn" style="background-color: white;" @click="getUserInfo">
						微信一键登录
					</button>
				</view>
			</view>
			
			<view class="w-flex-col section_3">
				<view class="w-flex-col">
					<view class="w-flex-row w-justify-between w-items-center group_3" @tap="goMerchantApply">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_6" src="/static/my/d47befff12bfe7d3c098713f3aa9dc14.png" />
							<text class="font_5">申请店铺</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view>
					<!-- <view class="w-flex-row w-justify-between w-items-center group_3" @tap="goMerchant">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_6" src="/static/my/d47befff12bfe7d3c098713f3aa9dc14.png" />
							<text class="font_5">店铺管理</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view> -->
					<!-- <view class="w-flex-row w-justify-between w-items-center group_4">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_8" src="/static/my/9d9adc9b54cd388ae2af423838cb8942.png" />
							<text class="font_5">我的团队</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view> -->
					<!-- <view class="w-flex-row w-justify-between group_4" @tap="goWallet">
						<view class="w-flex-row space-x-12">
							<image class="w-shrink-0 image_9" src="/static/my/464f8791f0a5ecebea95bafd6fe2a378.png" />
							<text class="font_5">我的钱包</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view>
					<view class="w-flex-row w-justify-between w-items-center group_5" v-if="user.is_auditor" @tap="goCheckShop">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_10" src="/static/my/464f8791f0a5ecebea95bafd6fe2a378.png" />
							<text class="font_5">店铺审核</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view>
					<view class="w-flex-row w-justify-between w-items-center group_4" @tap="goCheckCoupon">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_8" src="/static/my/9d9adc9b54cd388ae2af423838cb8942.png" />
							<text class="font_5">扫码核销</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view> -->
					<view class="w-flex-row w-justify-between w-items-center group_5">
						<view class="w-flex-row w-items-center space-x-12">
							<image class="w-shrink-0 image_10" src="/static/my/7f1aaabdd2c61ca8897fc1014dcf6fa0.png" />
							<text class="font_5">意见反馈</text>
						</view>
						<image class="image_7" src="/static/my/49168a6161c2ed15e9883f7627e4a5c2.png" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				token: '',
				user: [],
				nickname: '',
				avatarUrl: ''
			};
		},
		onShow() {
			this.getUser()
			this.token = uni.getStorageSync('token')
		},
		methods: {
			goCoupons(){
				uni.navigateTo({
					url:"/subpackageA/my/coupon"
				})	
			},
			goCheckCoupon(){
				uni.navigateTo({
					url:"/subpackageA/my/scan"
				})	
			},
			goCheckShop(){
				uni.navigateTo({
					url:"/subpackageA/my/check_shops"
				})	
			},
			goMerchantApply(){
				uni.navigateTo({
					url:"/subpackageA/merchant/apply"
				})	
			},
			goMerchant(){
				uni.navigateTo({
					url:"/subpackageB/working_table/working_table"
				})	
			},
			/**
			 *
			 * 获取用户信息
			 */
			getUserInfo() {
				// 展示加载框
				uni.showLoading({
					title: '授权中',
				});
				uni.getUserProfile({
					desc: '登录后可同步数据',
					success: async (obj) => {
						// this.userInfo = obj.userInfo;
						// 调用 action ，请求登录接口
						uni.login({
							provider: 'weixin',
							success: async (res) => {
								// console.log('登录获取code', res.code);
								if (res.errMsg == 'login:ok') {
									await this.loginAuth({
										userProfile: obj,
										code: res.code,
									});
								}
							},
						});
					},
					fail: () => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},
			loginAuth(data) {
				// console.log(data)
				this.$http.post('wuserlogin', {
					code: data.code
				}).then(res => {
					uni.setStorageSync('token', res.data.data.access_token)
					this.token = res.data.data.access_token
					this.getUser()
				}).catch(err => {

				})
			},
			getUser() {
				this.$http.get('user', {}).then(res => {
					this.user = res.data.data
					uni.setStorageSync('user', res.data.data)
				}).catch(err => {

				})
			},
			bindblur(e) {
				// 获取微信昵称
				// console.log('nickName', e)
				this.nickName = e.detail.value;
				this.user.nick_name = this.nickName
				this.$http.post('nickname', {
					nick_name: this.nickName
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}).catch(err => {

				})
			},
			bindinput(e) {
				// console.log('nickName', e)
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.nickName = e.detail.value;
			},
			onChooseavatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
				this.user.head_img = this.avatarUrl
				this.$http.upload('headimg', {
					filePath: e.detail.avatarUrl, // 要上传文件资源的路径。
					// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
					custom: {
						auth: true
					}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
					name: 'avatarUrl', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					// 返回当前请求的task, options。请勿在此处修改options。非必填
					getTask: (task, options) => {
						task.Update((res) => {
							if (res.progress > 50) {
								uploadTask.abort();
							}
						});
					}
				}).then(res => {
					// 返回的res.data 已经进行JSON.parse
				}).catch(err => {

				})
			},
			goWallet(){
				uni.navigateTo({
					url:"/pages/wallet/wallet"
				})
			},
			goCreate(){
				uni.reLaunch({
					url:"/pages/home/home"
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		border-radius: 38.46rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.login-btn {
			background-color: #22b14C;
			height: 90rpx;
		}

		.group_2 {
			overflow-x: hidden;
			height: 1396.15rpx;

			.group {
				margin-left: -146.15rpx;
				overflow: hidden;
				width: 896.15rpx;

				.image {
					margin-left: 146.15rpx;
					width: 750rpx;
					height: 553.85rpx;
				}

				.image_3 {
					opacity: 0.3;
					border-radius: 321.15rpx;
					filter: blur(0.96rpx);
					width: 905.77rpx;
					height: 905.77rpx;
				}

				.pos_3 {
					position: absolute;
					left: -323.08rpx;
					bottom: -527.88rpx;
				}

				.section {
					width: 200rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}

				.btn {
					width: 50rpx;
					position: initial;
				}

				.pos {
					position: absolute;
					top: 220rpx;
					/* margin: 0 auto; */
					right: 270rpx;
				}

				.image_2 {
					border-radius: 50%;
					width: 115.38rpx;
					height: 115.38rpx;
				}

				.pos_2 {
					position: absolute;
					right: 317.31rpx;
					top: 129.81rpx;
				}

				.text {
					color: #ffffff;
					font-size: 34.62rpx;
					font-family: AlibabaPuHuiTi;
					line-height: 26.92rpx;
				}

				.pos_4 {
					transform: translateY(-50%);
					font-size: 28rpx;
				}

				.equal-division {
					width: 326.92rpx;

					.equal-division-item {
						flex: 1 1 153.85rpx;
						padding: 7.69rpx 15.38rpx;
						background-color: #ffffff4d;
						border-radius: 20rpx;

						.image_4 {
							width: 22.12rpx;
							height: 22.12rpx;
						}

						.img {
							margin-top: 12rpx;
						}

						.font_1 {
							font-size: 23.08rpx;
							font-family: AlibabaPuHuiTi;
							line-height: 22.12rpx;
							color: #ffffff;
						}

						.text_2 {
							line-height: 21.15rpx;
						}

						.tex {
							margin-left: 5rpx;
						}
					}
				}

				.space-x-10 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 19.23rpx;
					}
				}

				.pos_5 {
					position: absolute;
					right: 201.92rpx;
					top: 327.88rpx;

					.tcen {
						text-align: center;
						align-items: center;
					}
				}
			}

			.equal-division_2 {
				margin: -130.77rpx 38.46rpx 0;
				padding: 34.62rpx 0 46.15rpx;
				background-color: #ffffff2b;
				border-radius: 23.08rpx;
				box-shadow: 0px 3.85rpx 71.15rpx #00000017;
				backdrop-filter: blur(24.04rpx);

				.equal-division-item_2 {
					padding: 11.54rpx 0;
					width: 224.04rpx;

					.font_2 {
						font-size: 46.15rpx;
						font-family: AlibabaPuHuiTi;
						line-height: 32.69rpx;
						color: #ffffff;
					}
				}

				.space-y-14 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 26.92rpx;
					}
				}

				.pos_6 {
					position: absolute;
					left: 50%;
					top: 34.62rpx;
					transform: translateX(-50%);
				}

				.pos_7 {
					position: absolute;
					right: 0;
					top: 34.62rpx;
				}
			}

			.section_2 {
				margin: 30.77rpx 38.46rpx 0;
				padding: 11.54rpx 0;
				filter: drop-shadow(0px 16.35rpx 24.52rpx #e9eff5);
				background-image: url('/static/my/af3b4a739405367ceb1f5980c8a2ae49.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.equal-division_3 {
					padding: 0 7.69rpx;

					.equal-division-item_3 {
						flex: 1 1 163.46rpx;
						padding: 11.54rpx 0;

						.image_5 {
							width: 79.81rpx;
							height: 79.81rpx;
						}

						.font_4 {
							font-size: 26.92rpx;
							font-family: AlibabaPuHuiTi;
							line-height: 22.12rpx;
							color: #6f7278;
						}

						.text_3 {
							font-size: 25rpx;
						}
					}

					.space-y-12 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 23.08rpx;
						}
					}
				}

				.space-x-4 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 7.69rpx;
					}
				}
			}

			.section_3 {
				margin: 30.77rpx 38.46rpx 0;
				padding: 0 57.69rpx 19.23rpx;
				filter: drop-shadow(0px 16.35rpx 24.52rpx #e9eff5);
				background-image: url('/static/my/6c2e66dda7b47d5c32e3aeccf5a95217.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.group_3 {
					padding: 48.08rpx 0 30.77rpx;
					border-bottom: solid 1.92rpx #f0f5f7;
				}

				.group_4 {
					padding: 30.77rpx 0;
					border-bottom: solid 1.92rpx #f0f5f7;
				}

				.space-x-12 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 23.08rpx;
					}

					.image_6 {
						width: 34.62rpx;
						height: 30.77rpx;
					}

					.font_5 {
						font-size: 26.92rpx;
						font-family: AlibabaPuHuiTi;
						line-height: 25rpx;
						color: #363b47;
					}

					.image_8 {
						width: 34.62rpx;
						height: 36.54rpx;
					}

					.image_9 {
						border-radius: 1.92rpx;
						width: 32.69rpx;
						height: 26.92rpx;
					}

					.image_10 {
						width: 34.62rpx;
						height: 32.69rpx;
					}
				}

				.image_7 {
					width: 11.54rpx;
					height: 23.08rpx;
				}

				.group_5 {
					padding: 30.77rpx 0;
				}
			}

			.button {
				margin: 38.46rpx 26.92rpx 0 48.08rpx;
				padding: 34.62rpx 0;
				filter: drop-shadow(0px 16.35rpx 24.52rpx #e9eff5);
				background-image: url('/static/my/ca53a80233231d833679d07a4b4bd338.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.text_4 {
					line-height: 24.04rpx;
				}
			}

			.font_3 {
				font-size: 26.92rpx;
				font-family: AlibabaPuHuiTi;
				line-height: 25rpx;
				color: #ffffff;
			}
		}
	}

	.space-y-40 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 76.92rpx;
		}
	}
</style>